<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>电商平台实时监控系统</h1>
    </div>

    <div class="dashboard-grid">
      <!-- 左列 -->
      <div class="column left-column">
        <div class="dashboard-card x-large">
          <div class="card-header">地区销售趋势</div>
          <div class="card-content">
            <echarts01></echarts01>
          </div>
        </div>

        <div class="dashboard-card x-small">
          <div class="card-header">商家销售统计</div>
          <div class="card-content">
            <echarts04></echarts04>
          </div>
        </div>
      </div>

      <!-- 中列 -->
      <div class="column middle-column">
        <div class="dashboard-card xx-large">
          <div class="card-header">商家分布</div>
          <div class="card-content">
            <echarts02></echarts02>
          </div>
        </div>

        <div class="dashboard-card xx-small">
          <div class="card-header">地区销售排行</div>
          <div class="card-content">
            <echarts05></echarts05>
          </div>
        </div>
      </div>

      <!-- 右列 -->
      <div class="column right-column">
        <div class="dashboard-card x-large">
          <div class="card-header">热销商品占比</div>
          <div class="card-content">
            <echarts03></echarts03>
          </div>
        </div>

        <div class="dashboard-card small">
          <div class="card-header">库存和销量分析</div>
          <div class="card-content">
            <echarts06></echarts06>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts01 from '@/components/echarts01.vue'
import echarts02 from '@/components/echarts02.vue'
import echarts03 from '@/components/echarts03.vue'
import echarts04 from '@/components/echarts04.vue'
import echarts05 from '@/components/echarts05.vue'
import echarts06 from '@/components/echarts06.vue'

export default {
  components: {
    echarts01,
    echarts02,
    echarts03,
    echarts04,
    echarts05,
    echarts06,
  },
  name: 'EcommerceDashboard',
  data() {
    return {
      // 数据可以在这里定义
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.dashboard-container {
  width: 100%;
  min-height: 100vh;
  background-color: #0f1621;
  color: #ffffff;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 40px;
  flex-shrink: 0;
}

.dashboard-header h1 {
  color: #ffffff;
  font-size: 28px;
  margin: 0;
  letter-spacing: 1px;
}

.dashboard-grid {
  flex: 1;
  display: flex;
  gap: 40px;
  /* 从30px加大到40px */
  min-height: 0;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* 从30px加大到40px */
  min-height: 0;
}

.left-column {
  flex: 1.2;
  /* 微调 */
}

.middle-column {
  flex: 1.6;
  /* 微调 */
}

.right-column {
  flex: 1.2;
  /* 微调 */
}

.dashboard-card {
  background-color: #1a2332;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: all 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.card-header {
  background-color: #252f3f;
  padding: 18px;
  font-size: 30px;
  font-weight: bold;
  border-bottom: 1px solid #2d3a4d;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}

.card-content {
  flex: 1;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0a8b8;
  overflow: hidden;
}

/* 卡片大小定义 - 调整特定卡片大小 */
.xx-large {
  flex: 2.5;
}

.x-large {
  flex: 2;
}

.large {
  flex: 1.5;
}

.normal {
  flex: 1.2;
}

.small {
  flex: 1.6;
}

.x-small {
  flex: 1.4;
}

.xx-small {
  flex: 1.2;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dashboard-grid {
    flex-direction: column;
    gap: 30px;
    /* 加大响应式间距 */
  }

  .left-column,
  .middle-column,
  .right-column {
    flex: 1 !important;
  }

  .dashboard-card {
    width: 100%;
    min-height: 300px !important;
    flex: 1 !important;
  }

  .xx-large,
  .x-large {
    min-height: 400px !important;
  }

  .xx-small,
  .x-small {
    min-height: 250px !important;
    /* 加大响应式高度 */
  }
}
</style>